<template>
  <div class="zz-dynamic-table">
    <table
      class="customTable"
      border="1"
      cellpadding="0"
      cellspacing="0"
      style="width: 100%"
    >
      <tr v-for="(aitem, i) in data" :key="'a' + i">
        <th
          v-for="(bitem, j) in aitem"
          :key="'b' + j"
          :rowspan="bitem.rowspan"
          :colspan="bitem.colspan"
          v-html="bitem.title"
        ></th>
      </tr>
    </table>
  </div>
</template>
<script>
// import formItem from "../title-form/form-item";
export default {
  name: "zz-dynamic-table",
  components: {
    // formItem,
  },
  props: {
    theadData: {
      type: Array,
      default: () => [
        { field: "date", title: "日期", type: "input" },
        {
          title: "配送信息",
          children: [
            { field: "name", title: "姓名", type: "input" },
            {
              title: "地址",
              children: [
                { field: "province", title: "省份", type: "input" },
                { field: "city", title: "市区", type: "input" },
                { field: "address", title: "详细<br/>地址", type: "input" },
              ],
            },
          ],
        },
        { field: "zip", title: "编码" },
      ],
    },
  },
  data() {
    return {
      rows: 1,
      tableData: [],
      newTheadData: [],
      data: [
        [
          {
            colspan: 2,
            field: "date",
            rowspan: 1,
            title: "日期",
            type: "input",
          },
        ],
         [
          {
            colspan: 1,
            field: "date",
            rowspan: 2,
            title: "配送信息",
            type: "input",
          },
           {
            colspan: 1,
            field: "date",
            rowspan: 1,
            title: "姓名",
            type: "input",
          },
        ],
         [
          {
            colspan: 1,
            field: "date",
            rowspan: 1,
            title: "地址",
            type: "input",
          }
        ],
      ],
    };
  },
  created() {
    // this.newTheadData = this.getTheadData(this.theadData);
  },
  methods: {
    //获取最终结果返出去
    getTableData() {
      this.$nextTick(() => {
        let result = "";
        if (this.tableData && this.tableData.length) {
          result = JSON.stringify(this.tableData);
        }
        this.$emit("input", result);
      });
    },
    addRow() {
      this.tableData.push({});
      // console.log(this.tableData);
    },
    //数组中是否有children字段
    isHaveChildren(arr) {
      if (!arr) {
        return false;
      }
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        if (item.children && item.children.length) {
          return true;
        }
      }
      return false;
    },
    //获取该列合并的总数
    getColCount(data) {
      let sum = 0;
      if (!data) {
        return sum;
      }
      if (!data.children) {
        return sum;
      }
      let _this = this;
      let fn = function (arr) {
        if (!arr) {
          return sum;
        }
        arr.forEach((item) => {
          if (item.children) {
            fn(item.children);
          } else {
            sum++;
          }
        });
      };
      fn(data.children);
      return sum;
    },
    //重组thead数据
    getTheadData(p) {
      let params = JSON.parse(JSON.stringify(p));
      if (!params) {
        return [];
      }
      let data = [],
        _this = this;
      var fn = function (arr) {
        if (!arr) {
          return [];
        }
        // 是否拥有多级表头
        let rowData = [];
        if (_this.isHaveChildren(arr)) {
          arr.forEach((item) => {
            if (item.children) {
              item.rowspan = 1;
              item.colspan = _this.getColCount(item);
              fn(item.children);
            } else {
              item.rowspan = arr.length;
              item.colspan = 1;
            }
            rowData.push(item);
          });
        } else {
          arr.forEach((item) => {
            item.rowspan = 1;
            item.colspan = 1;
            rowData.push(item);
          });
        }
        data.unshift(rowData);
      };
      if (this.isHaveChildren(params)) {
        //重组
        this.rows = params.length;
        fn(params);
      } else {
        //不重组
        data.push(params);
      }
      // console.log(data);
      return data;
    },
  },
  watch: {
    theadData(value) {
      this.newTheadData = this.getTheadData(value);
    },
  },
};
</script>
<style lang="scss" scoped>
table {
  color: #ffffff;
  font-size: 14px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  border-left: 1px solid rgba(31, 179, 255, 0.2);
  border-top: 1px solid rgba(31, 179, 255, 0.2);
}
th {
  border-right: 1px solid rgba(31, 179, 255, 0.2);
  border-bottom: 1px solid rgba(31, 179, 255, 0.2);
  padding: 10px 10px;
  min-width: 100px;
}
td {
  border-right: 1px solid rgba(31, 179, 255, 0.2);
  border-bottom: 1px solid rgba(31, 179, 255, 0.2);
  padding: 3px 15px;
  text-align: left;
  color: #3c3c3c;
}
tbody,
thead {
  float: left;
}
</style>>